define(function(require, exports, module) {

  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');

  function main() {
    var $app = $('<div id="app">').width(800).height(600);
    $('#main').html($app);

    app($app)
  }


  function app($app) {
    var paths1 = [
      [195, 139.4],
      [171.60400969913923, 156.3981819383763],
      [180.54048279360518, 183.90181806162371],
      [209.45951720639482, 183.90181806162371],
      [218.39599030086077, 156.3981819383763],
      [195, 139.4],
      [195, 164],
      [195, 164],
      [195, 164],
      [195, 164],
      [195, 164],
      [195, 164]
    ]

    var paths2 = [
      [195, 90.2],
      [124.81202909741766, 141.19454581512886],
      [151.62144838081548, 223.70545418487112],
      [238.3785516191845, 223.70545418487114],
      [265.1879709025823, 141.1945458151289],
      [195, 90.2],
      [195, 114.8],
      [241.79198060172155, 148.7963638767526],
      [223.91903441278967, 203.80363612324743],
      [166.08096558721033, 203.8036361232474],
      [148.20801939827845, 148.7963638767526],
      [195, 114.8]
    ]

    var paths3 = [
      [195, 41],
      null, [122.70241396802582, 263.5090903081185],
      [267.29758603197416, 263.5090903081185],
      [311.9799515043039, 125.9909096918815],
      [195, 41],
      [195, 65.6],
      [288.5839612034431, 133.5927277535052],
      [252.83806882557934, 243.60727224649486],
      [137.16193117442066, 243.6072722464948],
      [101.41603879655688, 133.59272775350516],
      [195, 65.6]
    ]


    var lines = [[[195,164],[195,164],[195,164],[195,164],[195,164],[195,164]],[[195,139.4],[171.60400969913923,156.3981819383763],[180.54048279360515,183.90181806162371],[209.45951720639482,183.90181806162371],[218.39599030086077,156.3981819383763],[195,139.4]],[[195,114.80000000000001],[148.20801939827845,148.7963638767526],[166.08096558721033,203.80363612324743],[223.91903441278967,203.80363612324743],[241.79198060172155,148.7963638767526],[195,114.80000000000001]],[[195,90.2],[124.81202909741768,141.1945458151289],[151.62144838081548,223.70545418487112],[238.37855161918452,223.70545418487114],[265.1879709025823,141.1945458151289],[195,90.2]],[[195,65.60000000000001],[101.41603879655689,133.59272775350516],[137.16193117442066,243.60727224649483],[252.83806882557934,243.60727224649486],[288.5839612034431,133.5927277535052],[195,65.60000000000001]],[[195,41],null,[122.70241396802582,263.5090903081185],[267.29758603197416,263.5090903081185],[311.9799515043039,125.9909096918815],[195,41]]]

    var $canvas = $('<canvas width="800" height="600"></canvas>');

    $app.append($canvas);

    var ctx = $canvas[0].getContext('2d');

    // [paths1, paths2, paths3].map(function(paths) {
    //   draw(ctx, paths);
    // })

    lines.map(function(line) {
      draw(ctx, line);
    })
  }

  function draw(ctx, paths) {

    ctx.moveTo(paths[0][0], paths[0][1])

    for (var i = 1; i < paths.length; i++) {
      if (paths[i]) {
        ctx.lineTo(paths[i][0], paths[i][1]);
        
      }
    }
    ctx.stroke()
  }

  return main;
})
